<template>
  <div>
    <div class="fivs-all-title">
      <span><strong>盘点明细</strong> </span>
    </div>
    <fmsx-form ref="fmsxTableRef" :model="model" :options="options" @submit="submitFormTable">
      <template slot="formTable_exceptionType" slot-scope="{ model }">
        <span class="table-striped-span" v-if="model.exceptionType == 1">盘亏</span>
        <span class="table-striped-span" v-if="model.exceptionType == 2">盘盈</span>
      </template>
    </fmsx-form>
  </div>
</template>

<script>
import wipApi from '@/api/fmsx/wip'

export default {
  desc: '在制品入库单申请表单',
  name: 'InventoryFrom',
  components: {},
  props: {
    disableSubmit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      model: {
        formTable: []
      },
      options: {
        details: false,
        isSubmitBtn: false,
        isEmptyBtn: false,
        details: this.disableSubmit,
        group: [
          {
            icon: '',
            label: '',
            column: [
              {
                label: '',
                prop: 'formTable',
                type: 'formTable',
                span: 24,
                children: {
                  type: 'table',
                  checkBox: false,
                  isAdd: false,
                  isInsert: false,
                  isDelete: true,
                  isPagination: false,
                  isShowOptions: false,
                  isShowColumn: false,
                  column: [
                    {
                      label: '工单号',
                      prop: 'moNum',
                      type: 'input',

                      details: true
                    },
                    {
                      label: '图号',
                      prop: 'dwgNo',
                      type: 'input',
                      width: 200,
                      details: true
                    },
                    {
                      label: '版本',
                      prop: 'rev',
                      type: 'input',
                      details: true
                    },
                    {
                      label: '客户代码',
                      prop: 'custCode',
                      type: 'input',
                      details: true
                    },
                    {
                      label: '生产数量',
                      prop: 'productionQuantity',
                      type: 'input',
                      details: true
                    },
                    {
                      label: '工序顺序',
                      prop: 'operationNum',
                      type: 'input',
                      details: true
                    },
                    {
                      label: '工序代码',
                      prop: 'processId',
                      type: 'input',
                      details: true
                    },
                    {
                      label: '工序名称',
                      type: 'input',
                      prop: 'processName',
                      details: true
                    },
                    {
                      label: '仓库名称',
                      details: true,
                      type: 'input',
                      prop: 'wmsName',
                      display: !this.disableSubmit
                    },
                    {
                      label: '货架名称',
                      details: true,
                      type: 'input',
                      prop: 'shelvesName',
                      display: !this.disableSubmit
                    },
                    {
                      label: '储位名称',
                      details: true,
                      type: 'input',
                      prop: 'storageName',
                      display: !this.disableSubmit
                    },
                    {
                      label: '仓库名称',
                      details: true,
                      type: 'input',
                      prop: 'wmsId_dictText',
                      display: this.disableSubmit
                    },
                    {
                      label: '货架名称',
                      details: true,
                      type: 'input',
                      prop: 'shelvesId_dictText',
                      display: this.disableSubmit
                    },
                    {
                      label: '储位名称',
                      details: true,
                      type: 'input',
                      prop: 'storageId_dictText',
                      display: this.disableSubmit
                    },
                    {
                      label: '库存数量',
                      details: true,
                      type: 'input',
                      prop: 'storageQuantity'
                    },
                    {
                      label: '盘点数量',
                      details: true,
                      type: 'input',
                      prop: 'resultQuantity'
                    },
                    {
                      label: '是否异常',
                      details: true,
                      display: false,
                      type: 'input',
                      prop: 'resultType',
                      events: {
                        rowChange: (model, itemOption, rowOption, rowIndex) => {
                          if (model.resultType == 2) {
                            rowOption.exceptionType.rules = [{ required: true, message: '请选择异常类型' }]
                            rowOption.exceptionQuantity.rules = [{ required: true, message: '请输入差额数量' }]
                          }
                        }
                      }
                    },
                    {
                      label: '异常类型',
                      type: 'fmsxSelect',
                      prop: 'exceptionType',
                      rules: [{ required: false, message: '' }],
                      options: {
                        data: [
                          { label: '盘亏', value: 1 },
                          { label: '盘盈', value: 2 }
                        ]
                      },
                      slot: this.disableSubmit
                    },
                    {
                      label: '差额数量',
                      rules: [{ required: false, message: '' }],
                      type: 'input',
                      details: this.disableSubmit,
                      prop: 'exceptionQuantity'
                    }
                  ]
                },
                events: {
                  rowClassName: (record) => {
                    if (record.resultType == 2) {
                      return 'table-striped'
                    }
                    return ''
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    handleDetail(record) {
      wipApi.Inventory.getInfoList({ makeStocktakingId: record.id }).then((res) => {
        this.$refs.fmsxTableRef.updateFieldOptions('formTable', { value: res.records })
      })
    },
    edit(result) {
      this.formModel = result
      this.$refs.fmsxTableRef.updateFieldOptions('formTable', { value: result.itemList })
    },
    submit() {
      this.$refs.fmsxTableRef.submitFun()
    },
    submitFormTable(model, callback) {
      wipApi.Inventory.confirm({
        ...this.formModel,
        itemList: model.formTable
      })
        .then(() => {
          this.$message.success('提交成功')
          this.$emit('ok')
        })
        .finally(() => {
          callback()
        })
    }
  }
}
</script>

<style lang="less" scoped>
.fivs-all-title {
  display: flex;
  align-items: center;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: rgba(0, 0, 0, 1);
  span {
    padding-left: 15px;
    display: flex;
    align-items: center;
  }
  &:before {
    content: '';
    display: inline-block;
    // position: absolute;
    margin-bottom: -6px;
    width: 4px;
    height: 24px;
    background: rgba(0, 129, 255, 1);
    z-index: 2;
  }
}
.tips-item {
  font-size: 16px;
  strong {
    color: rgb(234, 85, 6);
  }
}
::v-deep {
  .table-striped {
    background-color: #b80000;
    color: #fff;
    .table-striped-span {
      color: #fff;
    }
  }
}
</style>
